<!-- 下拉隐藏按钮 -->
<template>
  <a-dropdown>
    <a-button class="button" type="link">
      <span>更多</span>
      <CaretDownOutlined style="margin-left: 2px" />
    </a-button>
    <template #overlay>
      <a-menu>
        <a-menu-item v-for="(item, index) in buttons" :key="index">
          <a-button class="button" v-bind="omit(item, ['children'])">
            <component v-if="item.children" :is="item.children" />
          </a-button>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>
<script setup lang="ts">
  import { type ButtonProps } from 'ant-design-vue';
  import { type h } from 'vue';
  import { omit } from 'lodash-es';
  import { CaretDownOutlined } from '@ant-design/icons-vue';

  export interface DropdownButtonsProps extends ButtonProps {
    children: ParametersOne<typeof h, 2>;
  }

  interface Props {
    buttons: DropdownButtonsProps[];
  }
  withDefaults(defineProps<Props>(), {});
</script>
<style lang="less" scoped>
  .button {
    padding: 0;
    margin: 0;
  }
</style>
